<template>
  <view class="body">
    <Search />
    <view class="cate">
      <scroll-view class="cate_left" scroll-y>
        <view
          :class="{
            cate_left_item: true,
            active: currentIndex === index,
          }"
          v-for="(item, index) in cateLeft"
          :key="item.cat_id"
          @tap="changeCate(index)"
          >{{ item.cat_name }}</view
        >
      </scroll-view>
      <scroll-view class="cate_right" scroll-y>
        <view
          class="cate_right_item"
          v-for="item in cateRight"
          :key="item.cat_id"
        >
          <view v-if="item.children.length > 0">
            <view class="title">
              {{ item.cat_name }}
            </view>
            <view class="goods">
              <navigator
                class="goods_item"
                v-for="item2 in item.children"
                :key="item2.cat_id"
                :url="'/pages/goods_list/main?cat_id='+item2.cat_id"
                hover-class="className"
              >
                  <image :src="item2.cat_icon" mode="" class="goods_image" />
                  <view class="goods_name">
                    {{ item2.cat_name }}
                  </view>
              </navigator>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import Search from "@/components/Search/index.vue";
import { getCategoryList } from "@/api/category";
export default {
  components: {
    Search,
  },
  data() {
    return {
      cateAll: [],
      cateLeft: [],
      cateRight: [],
      currentIndex: 0,
    };
  },
  onLoad() {
    const cateAll = uni.getStorageSync("cateAll");
    const getCateTime = uni.getStorageSync("getCateTime");
    if (cateAll && getCateTime) {
      const now = Date.now();
      if (now - getCateTime >= 10 * 60 * 1000) {
        this.getCategoryList();
      } else {
        this.cateAll = cateAll;
        this.cateLeft = cateAll.map(({ cat_name, cat_id }) => ({
          cat_name,
          cat_id,
        }));
        this.cateRight = cateAll[this.currentIndex].children;
      }
    } else {
      this.getCategoryList();
    }
  },
  methods: {
    async getCategoryList() {
      const res = await getCategoryList();
      const cateAll = res.data.message;
      const getCateTime = Date.now();
      uni.setStorageSync("cateAll", cateAll);
      uni.setStorageSync("getCateTime", getCateTime);
      this.cateAll = cateAll;
      this.cateLeft = res.data.message.map(({ cat_name, cat_id }) => ({
        cat_name,
        cat_id,
      }));
      this.cateRight = cateAll[this.currentIndex].children;
    },
    changeCate(index) {
      this.currentIndex = index;
      this.cateRight = this.cateAll[index].children;
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  background-color: #f8f8f8;
  width: 100vw;
  height: 100vh;
  .cate {
    display: flex;
    .cate_left {
      width: 182rpx;
      height: calc(100vh - 100rpx);
      background-color: #fff;
      .cate_left_item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 76rpx;
        font-size: 28rpx;
        color: #585858;
        &.active {
          color: #ea4350;
          &::before {
            content: "";
            position: absolute;
            left: 0;
            width: 4rpx;
            height: 42rpx;
            background-color: #ea4350;
          }
        }
      }
    }
    .cate_right {
      flex: 1;
      height: calc(100vh - 100rpx);
      .cate_right_item {
        margin: 20rpx;
        background-color: #fff;
        border-radius: 10rpx;
        overflow: hidden;
        .title {
          font-size: 30rpx;
          margin: 20rpx;
        }
        .goods {
          display: flex;
          flex-wrap: wrap;
          .goods_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 33.33%;
            .goods_image {
              width: 120rpx;
              height: 120rpx;
            }
            .goods_name {
              font-size: 28rpx;
              color: #585858;
              margin: 5rpx 0 20rpx;
            }
          }
        }
      }
    }
  }
}
</style>